<template>
<h1>用户管理</h1>
  <el-table :data="userList" stripe>
    <el-table-column prop="userName" label="用户名"></el-table-column>
    <el-table-column prop="passWord" label="密码"></el-table-column>
    <el-table-column prop="realName" label="真实姓名"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="danger" @click="remove(scope.row.userId)">删除用户</el-button>
        <el-button type="primary" @click="update(scope.row)">修改权限</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <div style="margin-top: 30px">
    <el-button type="primary" @click="addDialog">添加用户</el-button>
  </div>

<!--添加用户对话框-->
  <el-dialog v-model="addVisible" title="添加用户信息" width="30%">
    <el-form :model="userForm" ref="userForm" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <el-input v-model="userForm.userName"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input v-model="userForm.realName"></el-input>
      </el-form-item>
      <span>拥有角色</span>
        <el-checkbox-group v-model="rArray" @change="findLimits">
          <el-checkbox :label="r.roleId" v-for="r in roleList" :key="r.roleId">
            {{r.roleName}}
          </el-checkbox>
        </el-checkbox-group>
      <span>拥有权限</span><br>
      <span v-for="l in limitList">{{l}}&nbsp;&nbsp;&nbsp;</span>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="addUser">添加</el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改用户权限对话框-->
  <el-dialog v-model="updateVisible" title="修改用户权限" width="30%">
    <el-form :model="updateForm" ref="updateForm" :rules="rules">
      <el-form-item label="用户名" prop="userName">
        <span>{{updateForm.userName}}</span>
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <span>{{updateForm.realName}}</span>
      </el-form-item>
      <el-form-item prop="userId">
      </el-form-item>
      <span>当前角色</span>

        <el-checkbox-group v-model="rArray" @change="findLimits">
          <el-checkbox :label="r.roleId" v-for="r in roleList" :key="r.roleId">
            {{r.roleName}}
          </el-checkbox>
        </el-checkbox-group>

      <span>拥有权限</span><br>
      <span v-for="l in limitList">{{l}}&nbsp;&nbsp;&nbsp;</span>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="xiugai">修改</el-button>
      </span>
    </template>
  </el-dialog>


  <div style="margin-left: 700px">
    <span>用户名称</span>
    <el-input v-model="findName" style="width: 120px"></el-input>
    <el-button type="primary" @click="reload">查询</el-button>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  created() {
    this.reload();
  },
  name: "User",
  data(){
    return{
      userList:[],
      roleList:[],
      rArray:[],
      limitList:[],
      curPage:1,
      pageSize:4,
      total:0,
      findName:'',
      addVisible:false,
      updateVisible:false,
      userForm:{},
      updateForm:{},
      rules:{
          userName : [{required:true,message:'请输入用户名',trigger:'blur'}],
          realName : [{required:true,message:'请输入用户名',trigger:'blur'}],
      }
    }
  },
  methods:{
    remove(userId){
      let param = new URLSearchParams();
      param.append("userId",userId);
      axios.post("/api/user/removeUser",param).then(response=>{
        if (response.data=='success'){
          this.reload();
        }
      })
    },
    update(row){
      axios.post("/api/role/findRoleList",null).then(response=>{
        this.updateForm = row;
        this.roleList = response.data;
        this.updateVisible = true;
        let param = new URLSearchParams();
        param.append("userId",row.userId);
        axios.post("/api/role/findRoleIdsByUserId",param).then(response=>{
           this.rArray = response.data;
           this.findLimits();
        })
      })
    },
    xiugai(){
      if (this.rArray.length == 0){
        ElMessage.error("请至少选择一个角色");
        return;
      }
       let param = new URLSearchParams();
       param.append("userId",this.updateForm.userId);
       param.append("roleIds",this.rArray);
       axios.post("/api/user/modifyUser",param).then(response=>{
          if (response.data=='success'){
            this.updateVisible = false;
          }
       })
    },
    addDialog(){
      this.rArray = [];
      this.limitList = [];
     axios.post("/api/role/findRoleList",null).then(response=>{
        this.roleList = response.data;
        this.addVisible = true;
     })
    },
    findLimits(){
        let param =new URLSearchParams();
        param.append("roleIds",this.rArray);
        axios.post("/api/role/findLimitsByRoleIds",param).then(response=>{
               this.limitList = response.data;
        })
    },
    addUser(){
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          if (this.rArray.length==0){
            ElMessage.error("请至少选择一个角色");
            return;
          }
          let param =new URLSearchParams();
          param.append("userName",this.userForm.userName);
          param.append("realName",this.userForm.realName);
          param.append("roleIds",this.rArray);
          axios.post("/api/user/addUser",param).then(response=>{
            if (response.data=='success'){
              this.addVisible = false;
              this.reload();
              ElMessage.success("添加成功");
            }
          })
        }else {
          ElMessage.error("数据不能为空")
        }
      });

    },
    reload(){
    let param = {
      "pageNo" : this.curPage,
      "pageSize" : this.pageSize,
      "t":{"userName":this.findName}
    }
    axios.post("/api/user/findUsersByPage",param).then(response=>{
      let data = response.data;
      this.userList = data.records;
      this.total = data.total;
    })
    }
  }
}
</script>

<style scoped>

</style>